<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>规格管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    
</head>

<body class="hold-transition skin-red sidebar-mini" >
  <!-- .box-body -->                
                    <div class="box-header with-border">
                        <h3 class="box-title">规格管理</h3>
                    </div>
                    <div class="box-body">
                        <!-- 数据表格 -->
                        <div class="table-box">

                            <!--工具栏-->
                            <div class="pull-left">
                                <div class="form-group form-inline">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ><i class="fa fa-file-o"></i> 新建</button>
                                        <button type="button" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button>
                                        
                                        <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
                                    </div>
                                </div>
                            </div>
                            <div class="box-tools pull-right">
                                <div class="has-feedback">
									<form id="selectByName">
										规格名称：<input type="text" name="specName" id="specnames">
										<input class="btn btn-default" type="text" value="查询" onclick="getBrand()"></input>
									</form>
                                </div>
                            </div>
                            <!--工具栏/-->
			                  <!--数据列表-->
			                  <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
			                      <thead>
			                          <tr>
			                              <th class="" style="padding-right:0px">
			                                  <input id="selall" type="checkbox" class="icheckbox_square-blue">
			                              </th> 
										  <th class="sorting_asc">规格ID</th>
									      <th class="sorting">规格名称</th>									     												
					                      <th class="text-center">操作</th>
			                          </tr>
			                      </thead>
			                      <tbody id="brand">

			                      </tbody>
								  <div class="container">
									  <ul class="pagination">
										  <a href="javascript:toPage(3)">首页</a>
										  <a href="javascript:toPage(1)">上一页</a>
										  <a href="javascript:toPage(2)">下一页</a>
										  <a href="javascript:toPage(4)">尾页</a>
										  当前第<input type="text" id="pageNum" name="pageNum" size="1">页
										  每页<input type="text" id="pageSize" name="pageSize" size="1">条
										  共<input type="text" id="totalPage" readonly="readonly" size="1">页
										  共<input type="text" id="totalCount" readonly="readonly" size="1">条
									  </ul>
								  </div>
			                  </table>
			                  <!--数据列表/-->    
                        </div>
                        <!-- 数据表格 /--> 
                     </div>
                    <!-- /.box-body -->                    
	          		    
                                
<!-- 编辑窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">规格编辑</h3>
		</div>
		<div class="modal-body">							
			
			<table class="table table-bordered table-striped"  width="800px">
		      	<tr>
		      		<td>规格名称</td>
					<td><input  class="form-control" placeholder="规格名称" id="specName" name="specName">  </td>
		      	</tr>
			 </table>				
			 
			 <!-- 规格选项 -->
			 <div class="btn-group">
                  <button type="button" class="btn btn-default" title="新建" onclick="inser()"><i class="fa fa-file-o"></i> 新增规格选项</button>
                  
             </div>
			 
			 <table class="table table-bordered table-striped table-hover dataTable"  id="productTable">
                    <thead>
                        <tr>
                          
					 
				      <th class="sorting">规格选项</th>
				      <th class="sorting">排序</th>																
                      <th class="sorting">操作</th>	
                    </thead>
                    <tbody>

                    </tbody>
			  </table> 
			
			
		</div>
		<div class="modal-footer">						
			<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="toadd()">保存</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>

  <!-- 编辑窗口 -->
  <div class="modal fade" id="editModals" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" >
  	<div class="modal-content">
  		<div class="modal-header">
  			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  			<h3 id="myModalLabels">规格编辑</h3>
  		</div>
  		<div class="modal-body">
  			<table class="table table-bordered table-striped"  width="800px" id="specContext">
  			 </table>
  			 <!-- 规格选项 -->
  			 <div class="btn-group">
                    <button type="button" class="btn btn-default" title="新建" onclick="inser()"><i class="fa fa-file-o"></i> 新增规格选项</button>
               </div>
  			 <table class="table table-bordered table-striped table-hover dataTable" id="updateTable">
  				 <thead>
  				 <tr>
  					 <th class="sorting">规格选项</th>
  					 <th class="sorting">排序</th>
  					 <th class="sorting">操作</th>
				 </tr>
  				 </thead>
  				 <tbody id="table">
  				 </tbody>
  			  </table>
  		</div>
  		<div class="modal-footer">
  			<button class="btn btn-success" data-dismiss="modal" aria-hidden="true"onclick="updatas()">保存</button>
  			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
  		</div>
  	  </div>
  	</div>
  </div>

</body>

</html>

<script>
	$(function (){
       getBrand();
    })

	function updatas() {
     alert("修改方法")
		var arr = [];
		var list = $("#updateTable").find("tr");
		for (var i = 1; i < list.length; i++) {
			var tdObjs = $(list[i]).find("td");
			var inputs = $(tdObjs[0]).find("input").val();
			var order = $(tdObjs[1]).find("input").val();
			var optionJson = {optionName: inputs, orders: order};
			arr.push(optionJson);
		}
		var arrStr = JSON.stringify(arr);
      $.ajax({
          url:"/specificationController/updatas",
          data: {id: $("#id").val() ,specName: $("#updateSpecName").val(), tbSpecificationJson: arrStr},
          type:"post",
          dataType:"json",
          success:function (parameter) {
              if(parameter.data){
                  alert("修改成功")
              }else{
                  alert("修改错误")
              }
          },
          error:function () {
              alert("代码错误")
          }
      })
 }

	function update(id) {
     alert("修改方法"+id);
      $.ajax({
          url:"/specificationController/updata?id="+id,
          type:"post",
          dataType:"json",
          success:function (list) {
          	var Alist = list.data;
          	var spec = Alist[0];
          	var option  = Alist[1];
			  var tr = "";
					tr += "<tr>";
					tr += "<td>规格名称</td>";
					tr += "<td>";
					tr += "<input type='hidden' name='id' id='id' value='" + spec.id + "'>";
					tr += "<input class='form-control' name='specName' id='updateSpecName' value='" + spec.specName + "' placeholder='规格名称'>";
					tr += "</td>";
					tr += "</tr>";
					$("#specContext").html(tr);
					var str = "";
			  for (var i = 0; i < option.length; i++) {
						str += "<tr>";
						str += "<td>";
						str += "<input type='text' class='form-control' name='optionName' value='" + option[i].optionName + "' placeholder='规格选项'>";
						str += "</td>";
						str += "<td>";
						str += "<input type='text' class='form-control' name='orders' value='" + option[i].orders + "' placeholder='排序'>";
						str += "</td>";
						str += "<td>";
						str += "<button type='button'  class='btn btn-default' onclick='deletetr(this)' title='删除'><i class='fa fa-trash-o'></i>删除";
						str += "</button>";
						str += "</td>";
						str += "</tr>";
					}
    		 $("#table").html(str);
          },
          error:function () {
              alert("代码错误")
          }
      })
 }

	function del(id) {
     alert("删除方法"+id);
      $.ajax({
          url:"/specificationController/delete?id="+id,
          type:"post",
          dataType:"json",
          success:function (parameter) {
              if(parameter){
                  alert("删除成功")
				  getBrand();
              }else{
                  alert("删除错误")
              }
          },
          error:function () {
              alert("代码错误")
          }
      })
 }

	function toadd() {
		var specNames = $("#specName").val();
		var tab = $("#productTable").find("tr");
		var arr = [];
		for(var i = 1;i < tab.length;i++){
			var tds = $(tab[i]).find("td");
			var optionName = $(tds[0]).find("input").val();
			var orders = $(tds[1]).find("input").val();
			arr.push({optionName:optionName,orders:orders})
		}
		var optionsListJson = JSON.stringify(arr)
		$.ajax({
			url:"/specificationController/insert",
			data: {optionsListJson:optionsListJson,specName:specNames},
			type:"post",
			dataType:"json",
			success:function (parameter) {
				if(parameter.data){
					alert("增加成功")
				}else{
					alert("增加错误")
				}
			},
			error:function () {
				alert("代码错误")
			}
		})
	}

	function inser() {
		var table = document.getElementById("productTable");
		var tr = document.createElement("tr");
		tr.innerHTML = '<tr><td><input  class="form-control" placeholder="规格选项"></td><td><input  class="form-control" placeholder="排序"></td><td><button type="button" class="btn btn-default" title="删除" onclick="deletetr(this)"><i class="fa fa-trash-o"></i> 删除</button></td></tr>';
		table.appendChild(tr);
		}

		function deletetr(Obj) {
			var tr = Obj.parentNode.parentNode;
			tr.parentNode.removeChild(tr);
		}

	function getBrand(){
		var name = $("#specnames").val();
		var pageNum = $("#pageNum").val();
    $.ajax({
       url:"/specificationController/selectAll",
       type:"get",
		data:{specName:name,pageNum:pageNum},
       dataType:"json",
       success:function (selevt){
           var page =  selevt.data;
		   var list = page.list;
          var table = "";
          for(var i = 0; i < list.length; i++){
             table += '<tr>';
             table += '<td><input type="checkbox" value="' + list[i].id + '" name="ids"></td>';
             table += '<td>' + list[i].id + '</td>';
             table += '<td>' + list[i].specName + '</td>';
             table += '<td class="text-center">';
 //<button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ><i class="fa fa-file-o"></i> 新建</button>
             table += '<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModals" onclick="update(' + list[i].id + ')">修改</button>';
             table += '<button type="button" class="btn bg-olive btn-xs" data-toggle="modal"  onclick="del(' + list[i].id + ')">删除</button>';
             table += '</td>';
             table += '</tr>';
          }
          table += '</table>';
          $("#brand").html(table);
		   pageInstall(page);
       },
       error:function (){
          alert("数据错误");
       }
    })
 }

	function pageInstall(page){
 	//获取页面文本框并赋值 (当前页数)
 	$("#pageNum").val(page.pageNum);
 	$("#pageSize").val(page.pageSize);
 	$("#totalPage").val(page.lastPage);
 	$("#totalCount").val(page.total);
 }

	function toPage(flag){
 	var pageNumber = parseInt($("#pageNum").val());
 	//alert(pageNumber);
 	var totalPages = parseInt($("#totalPage").val());
 	//alert(totalPages)
 	if(flag == 1){
 		if(pageNumber <= 1){
 			//alert("已经是首页");
             toastr.success("已经是首页");

 			return;
 		}
 		$("#pageNum").val(pageNumber - 1);
 	}else if(flag == 2){
 		if(pageNumber >= totalPages){
 			alert("已经是尾页");
             toastr.success("已经是尾页");
 			return;
 		}
 		$("#pageNum").val(pageNumber + 1);
 	}else if(flag == 3){
 		if(pageNumber <= 1){
 			//alert("已经是首页");
             toastr.success("已经是首页");
 			return;
 		}
 		$("#pageNum").val(1);
 	}else if(flag == 4){
 		if(pageNumber >= totalPages){
 			//alert("已经是尾页");
             toastr.success("已经是尾页");
 			return;
 		}
 		$("#pageNum").val(totalPages);
 	}
		getBrand();
 }
</script>